import { useState } from 'react';
import { message, Layout, Result, Input } from 'antd';
import './JSONFormat.css';

const staticMessageText = {
  noData: '暂无数据',
  formatSucceed: '格式化成功！',
  formatFailed: '格式化失败！',
  fileTypeError: '文件类型错误！',
  copySucceed: '复制成功！',
  copyFailed: '复制失败！',
};

const { Content } = Layout;
const { TextArea } = Input;

const JSONFormat = (props: any) => {
  const { setIsLoading } = props;
  const [currentText, setCurrentText]: any[] = useState('');

  // 格式化
  const handleFormatClick = () => {
    if (document.getElementById('inputTextArea')) {
      setCurrentText(document.getElementById('inputTextArea')?.value || '');
      message.success(staticMessageText.formatSucceed);
    } else {
      message.error(staticMessageText.formatFailed);
    }
  };

  // 复制到剪切板
  const handleCopyClick = () => {
    const clipboardObj = navigator.clipboard;
    const resultJSON = document.getElementById('contextJSON')?.innerText || '';
    try {
      setIsLoading(true);
      if (clipboardObj) {
        // eslint-disable-next-line promise/catch-or-return
        clipboardObj.writeText(resultJSON).then(
          // eslint-disable-next-line promise/always-return
          () => {
            message.success(staticMessageText.copySucceed);
            setIsLoading(false);
          },
          () => {
            message.error(staticMessageText.copyFailed);
          }
        );
      }
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <div className="containerBox">
      <Layout className="layout">
        <Content
          style={{
            width: 'calc(100vw - 204px)',
            height: '100vh',
            padding: '30px',
            background:
              'linear-gradient( 200.96deg, #2afe58 -29.09%, #57cddd 51.77%, #3c6ffa 129.35% )',
          }}
        >
          <div>
            <TextArea
              id="inputTextArea"
              allowClear
              showCount
              placeholder="请输入..."
            />
          </div>
          <button
            type="button"
            className="formatButton"
            onClick={handleFormatClick}
          >
            <span role="img" aria-label="books">
              ✍ 进行格式化
            </span>
          </button>
          {/* 文本显示 */}
          <div className="site-layout-content">
            <pre id="contextJSON">
              {currentText ? (
                JSON.stringify(JSON.parse(currentText), null, 2)
              ) : (
                <Result
                  status="404"
                  title=""
                  subTitle={staticMessageText.noData}
                />
              )}
            </pre>
          </div>
          {/* 复制按钮 */}
          <button
            type="button"
            className="copyButton"
            onClick={handleCopyClick}
            disabled={currentText === ''}
          >
            <span role="img" aria-label="books">
              📋️ 复制到剪切板
            </span>
          </button>
        </Content>
      </Layout>
    </div>
  );
};
export default JSONFormat;
